<template>
	<div class="board2 pannel">
		<div class="board-header">
			<span class="label">是否支持AB实验</span>
			<span>
				<el-radio v-model="supportABTest" :label="1">支持</el-radio>
				<el-radio v-model="supportABTest" :label="0">不支持</el-radio>
			</span>
		</div>

		<div class="board-body" v-show="true">
			<div class="choosen-type">
				<div class="base-item">
					<p class="base-info">
						<span class="name">C</span>
						<span class="type">对照组</span>
						<i class="el-icon-s-tools"></i>
					</p>
					<p class="percent">50%</p>
				</div>
				<div class="items">
					<div class="base-item">
						<p class="base-info">
							<span class="name1">C</span>
							<span class="type">对照组</span>
							<i class="el-icon-s-tools"></i>
						</p>
						<p class="percent">50%</p>
					</div>
				</div>
				<div class="add-btn"><i class="el-icon-plus"></i></div>
			</div>
			<div class="form">
<!--				<el-form ref="form" :model="baseForm" label-width="144px" label-position='left'>-->
					<el-form-item label="活动名称">
						<el-radio v-model="touch" :label="1">对用户进行触达</el-radio>
						<el-radio v-model="touch" :label="0">不对用户进行触达</el-radio>
					</el-form-item>
					<el-form-item label="触达通道">
						<el-select v-model="touchType" placeholder="请选择">
							<el-option v-for="item in ['触达1', '触达2', '触达3']" :key="item" :label="item"
								:value="item">
							</el-option>
						</el-select>
						<i class="el-icon-refresh" style="margin-left: 10px;font-size: 18px;"></i>
					</el-form-item>
					<p class="main-title">模板参数</p>
					<template>
						<el-form-item label="券">
							<el-input class='small-input-box' v-model="tickets"></el-input>
						</el-form-item>
					</template>
					<template>
						<el-form-item label="短信文案" class="top-space">
							<textarea class="input-div" contenteditable="true" v-model="message">
							</textarea>
						</el-form-item>
						<el-form-item label="服务号文案">
							<textarea class="input-div" contenteditable="true" v-model="servercePlatform">

							</textarea>
						</el-form-item>
					</template>
					<template>
						<el-form-item label="主题">
							<textarea class="input-div" contenteditable="true" v-model="theme">

							</textarea>
						</el-form-item>
						<el-form-item label="内容">
							<textarea class="input-div" contenteditable="true" v-model="content">

							</textarea>
						</el-form-item>
						<el-form-item label="模板ID">
							<el-input class='small-input-box' v-model="tempateId"></el-input>
						</el-form-item>
						<el-form-item label="活动ID">
							<el-input class='small-input-box' v-model="activityId"></el-input>
						</el-form-item>
						<el-form-item label="活动名称">
							<el-input class='small-input-box' v-model="activityName"></el-input>
						</el-form-item>
					</template>
					<p class="test-send">
						<i class="el-icon-message"></i>
						<span>测试发送</span>
					</p>
					<el-form-item label="标签设置">
						<el-checkbox v-model="tagChecked">触达成功的用户被打上标签</el-checkbox>
						<el-input v-if="tagChecked" placeholder="请输入标签名称" class="small-input-box"></el-input>
					</el-form-item>
					<p class="main-title">发送设置</p>
					<el-form-item label='勿扰设置'>
						<el-switch v-model="doNotDisturb" active-color="#13ce66" active-text="开">
						</el-switch>
					</el-form-item>
					<p class="main-line" v-if="doNotDisturb">
						<el-time-select style="width: 82px;" v-model="notDisturbStartTime" placeholder="选择时间">
						</el-time-select>
						<span>至</span>
						<el-time-select style="width: 82px;" v-model="notDisturbEndTime" placeholder="选择时间">
						</el-time-select>
						<span>为用户勿扰时间段，若在该时间段内触发则</span>
						<el-select v-model="action" placeholder="请选择">
							<el-option v-for="item in ['action']" :key="item" :label="item" :value="item"
								style="width: 206px;">
							</el-option>
						</el-select>
					</p>
					<el-form-item label='全局触达限制'>
						<el-switch v-model="globalTrigger" active-color="#13ce66" active-text="开">
						</el-switch>
					</el-form-item>
					<p class="main-line">
						仅显示当前计划中使用的通道的限制，如需修改请前往全局触达限制页面
						<span class="refresh-btn"><i class="el-icon-refresh"></i>刷新</span>
					</p>
					<el-form-item label="Webhook">
						<span>无限制</span>
					</el-form-item>
<!--				</el-form>-->
			</div>

		</div>

	</div>


</template>

<script>
	import {
		getTriggerType,
		formatTime,
		formatDate
	} from '../utils.js'

	export default {
		name: "board2",
		data() {
			return {
				supportABTest: 1,
				touchType: '',
        touch: 1,
        type: null,
        tickets: '',
        message: '',
        servercePlatform: '',
        theme: '',
        content: '',
        tempateId: '',
        activityId: '',
        activityName: '',
        tagChecked: false,
        doNotDisturb: true,
        action: '',
        notDisturbStartTime:'',
        notDisturbEndTime:'',
        // baseForm: {
				// 	touch: 1,
				// 	type: null,
				// 	tickets: '',
				// 	message: '',
				// 	servercePlatform: '',
				// 	theme: '',
				// 	content: '',
				// 	tempateId: '',
				// 	activityId: '',
				// 	activityName: '',
				// 	tagChecked: false,
				// 	doNotDisturb: true,
				// 	action: '',
				// 	notDisturbTime: {
				// 		startTime: '',
				// 		endTime: ''
				// 	},
				 	globalTrigger: '',
				// }
			}
		},
    computed: {
      form() {
        return {
          supportABTest : this.supportABTest,
          touch : this.touch,
          touchType : this.touchType,
          tickets : this.tickets,
          message : this.message,
          servercePlatform : this.servercePlatform,
          theme : this.theme,
          content : this.content,
          tempateId : this.tempateId,
          activityId : this.activityId,
          activityName : this.activityName,
          tagChecked : this.tagChecked,
          doNotDisturb : this.doNotDisturb,
          notDisturbStartTime : this.notDisturbStartTime,
          notDisturbEndTime : this.notDisturbEndTime,
          action : this.action,
        }
      }
    },
    watch: {
      form(newval) {
        this.$emit('board2', newval)
      }
    },
		created() {
		},
		methods: {
			handleInput(e) {
				console.log(e.target.innerText)
			}
		}

	};
</script>

<style lang="scss">
	$base-color-blue: #00BF8A;

	.board2 {
		background-color: #F5F8F9;
		padding: 0;

		.board-header {
			display: flex;
			align-items: center;
			height: 50px;
			background-color: #fff;
			padding: 0 19px;
			box-shadow: 0 0 5px rgb(153 170 192 / 17%);
			border-radius: 3px;

			.label {
				margin-right: 77px;
				font-size: 14px;
				color: rgba(0, 15, 38, .9);
			}
		}

		.board-body {
			margin-top: 16px;
			min-height: calc(100% - 62px);
			background-color: #fff;
			padding: 0 0 64px;
			margin-top: 11px;

			.choosen-type {
				position: relative;
				display: flex;
				align-items: center;
				list-style: none;
				padding: 0 20px 0 24px;
				height: 90px;
				overflow: auto;
				box-sizing: border-box;
				overflow-y: hidden;
				border-bottom: 1px solid #E0E6ED;

				.base-item {
					position: relative;
					width: 142px;
					height: 58px;
					line-height: 1;
					font-size: 13px;
					color: #1f2d3d;
					box-sizing: border-box;
					border: 1px solid #e0e6ed;
					border-radius: 3px;
					margin-left: 12px;
					padding: 10px;

					.base-info {
						position: relative;

						.name {
							display: inline-block;
							width: 20px;
							height: 20px;
							padding: 0 2px;
							margin-right: 4px;
							line-height: 20px;
							font-size: 10px;
							border-radius: 3px;
							color: #fff;
							text-align: center;
							background-color: #307EF2;
							transform: scale(.833);
						}

						.name1 {
							display: inline-block;
							height: 20px;
							width: 20px;
							padding: 0 2px;
							margin-right: 4px;
							line-height: 20px;
							font-size: 10px;
							border-radius: 3px;
							color: #fff;
							text-align: center;
							background-color: #00bf8a;
							transform: scale(.833);
						}

						.type {
							color: #333;
						}

						i {
							position: absolute;
							right: 3px;
							top: 2px;
							color: #99A9BF;
						}
					}

					.percent {
						margin-top: 6px;
						margin-left: 20px;
						color: #999;
					}
				}

				.base-item-active {
					border-color: $base-color-blue;
					background-color: #EAF9F5;
				}

				&>.add-btn {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 26px;
					height: 26px;
					color: #fff;
					border-radius: 3px;
					background-color: #00bf8a;
					cursor: pointer;
					margin-left: 12px;
				}
			}

			.form {
				box-sizing: border-box;
				padding: 32px 24px 0;

				.el-form-item__label {
					font-weight: 500;
				}

				.main-title {
					color: #1f2d3d;
					font-size: 16px;
					font-weight: 500;
					margin: 30px 0;
				}

				.test-send {
					font-size: 16px;
					color: #307EF2;
					margin-bottom: 22px;

					i {
						margin-right: 8px;
					}
				}

				.top-space {
					margin-top: 10px;
				}

				.input-div {
					border: 1px solid #E0E6ED;
					width: 50%;
					height: 135px;
					min-width: 500px;
					border-radius: 4px;
				}

				.small-input-box {
					width: 50%;
					min-width: 500px;
					display: block;
				}

				.main-line {
					margin-bottom: 22px;

					&>* {
						margin-right: 10px;
					}
				}
			}
		}
	}
</style>
